<template>
  <div>
    <myHeader></myHeader>
    <el-row :gutter="30" style="padding:30px 50px">
      <el-col :span="6" v-for="pro in projects" :key="pro.id" style="margin-top:20px">
        <div class="pro_box">
          <div class="t_box" @click="enterPro(pro)">
            <div class="pro_title" v-if="pro.name.length<12">{{pro.name}}</div>
            <div class="pro_title" v-else>
              <el-tooltip :content="pro.name" placement="top">
                <span>{{pro.name.slice(0,12)+"..."}}</span>
              </el-tooltip>
            </div>
            <div class="leader">
              <span>{{pro.leader}}</span>
            </div>
          </div>
          <div class="pro_desc">
            <div style="font-size:15px">项目描述:</div>
            <div style="font-size:20px;color:#000;line-height:20px;padding-top: 10px;">{{pro.desc}}</div>
          </div>
          <div class="b_box">
            <el-dropdown @command="handleProject">
              <span class="el-dropdown-link" style="color:#3452b4">
                <span>更多</span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{cmd:'delete',id:pro.id}">
                  <i class="el-icon-delete" style="color:red">删除</i>
                </el-dropdown-item>
                <el-dropdown-item :command="{cmd:'edit',project:pro}">
                  <i class="el-icon-edit-outline" style="color:#00AAFF">编辑</i>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-col>

      <el-col :span="6" style="margin-top:20px">
        <div class="pro_box add_btn" @click="addDlg = true">
          <el-tooltip content="添加项目" placement="top">
            <i class="el-icon-plus"></i>
          </el-tooltip>
        </div>
      </el-col>
    </el-row>

    <div class="block" style="padding:20px 50px">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        layout="total, prev, pager, next"
        :total="count"
      ></el-pagination>
    </div>

    <!-- 添加项目的弹框 -->
    <el-dialog title="添加项目" :visible.sync="addDlg" width="30%">
      <el-form :model="addForm" :rules="dialogRules" ref="addRef">
        <el-form-item prop="name">
          <el-input v-model="addForm.name" placeholder="请输入内容">
            <template slot="prepend">项目名称</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="leader">
          <el-input v-model="addForm.leader" placeholder="请输入内容">
            <template slot="prepend">负责人</template>
          </el-input>
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input type="textarea" v-model="addForm.desc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDlg = false">取 消</el-button>
        <el-button type="primary" @click="addProject">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑项目的弹框 -->
    <el-dialog title="编辑项目" :visible.sync="editDlg" width="30%">
      <el-form :model="editForm" :rules="dialogRules" ref="addRef">
        <el-form-item prop="name">
          <el-input v-model="editForm.name" placeholder="请输入内容">
            <template slot="prepend">项目名称</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="leader">
          <el-input v-model="editForm.leader" placeholder="请输入内容">
            <template slot="prepend">负责人</template>
          </el-input>
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input type="textarea" v-model="editForm.desc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDlg = false">取 消</el-button>
        <el-button type="primary" @click="editProject">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import myHeader from '../components/Header.vue'
import { mapMutations } from 'vuex'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: { myHeader },
  props: {},
  data() {
    // 这里存放数据
    return {
      page: 1,
      count: 0,
      projects: [],
      addForm: {},
      editForm: {},
      addDlg: false,
      editDlg: false,
      dialogRules: {
        name: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' },
        ],
        leader: [
          { required: true, message: '项目负责人不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 将vuex中的方法引入到该组件中
    ...mapMutations(['updatePro']),
    async getProjects() {
      const response = await this.$api.getAllProject(this.page)
      console.log(response)
      this.projects = response.data.results
      this.count = response.data.count
    },
    handleCurrentChange(val) {
      this.page = val
      this.getProjects()
    },
    handleProject(obj) {
      console.log(obj)
      if (obj.cmd === 'delete') {
        this.deleteProject(obj.id)
      } else if (obj.cmd === 'edit') {
        this.editForm = { ...obj.project }
        this.editDlg = true
      }
    },
    async deleteProject(id) {
      const response = await this.$api.deletePro(id)
      console.log(response)
      if (response.status === 204) {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1000,
        })
        this.getProjects()
      }
    },
    async addProject() {
      const response = await this.$api.addPro(this.addForm)
      if (response.status === 201) {
        this.$message({
          message: '添加成功',
          type: 'success',
          duration: 1000,
        })
        this.addForm = {}
        this.addDlg = false
        this.getProjects()
      }
    },
    async editProject() {
      const response = await this.$api.editPro(this.editForm.id, this.editForm)
      if (response.status === 200) {
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 1000,
        })
        this.editDlg = false
        this.getProjects()
      }
    },
    //点击进入项目
    enterPro(pro) {
      this.updatePro(pro)
      this.$router.push({ name: 'home' })
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getProjects()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.pro_box {
  height: 250px;
  box-shadow: 0 0 2px #000;
  border-radius: 5px;
}
/* 顶部 */
.t_box {
  height: 120px;
  cursor: pointer;
  background: url(../assets/img/1.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.leader {
  color: #fff;
  font-size: 12px;
  padding-left: 20px;
}
.leader span {
  background: rgba(173, 173, 173, 0.2);
  line-height: 25px;
  padding: 0 8px;
  display: inline-block;
}
.pro_title {
  color: #fff;
  font-size: 30px;
  text-indent: 20px;
  line-height: 60px;
}
/* 中间 */
.pro_desc {
  height: 100px;
  border-bottom: solid 1px #b1b1b1;
  color: #b1b1b1;
  line-height: 17px;
  text-indent: 20px;
  padding-top: 10px;
}
/* 底部 */
.b_box {
  height: 20px;
  text-align: right;
  padding: 0 10px;
}
/* 添加项目按钮 */
.add_btn {
  color: #b1b1b1;
  line-height: 250px;
  font-size: 80px;
  text-align: center;
  cursor: pointer;
}
</style>